<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link th:href="@{/css/style.css}" rel="stylesheet" type="text/css" />
  <script type="text/javascript" th:src="@{/js/jquery.js}"></script>
</head>


<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>营销管理</li>
    <li>客户管理</li>
    <li>添加</li>
  </ul>
</div>
<div class="formbody">
  <form th:action="@{/custom/addCustom}" id="customForm"  method="post">
    <div class="formtitle"><span>客户信息</span></div>
    <ul class="forminfo">
      <li>
        <label>姓名</label>
        <input name="customname" id="customname" type="text" class="dfinput" />
        <i>必填，不能超过30个字符</i>
      </li>
      <li>
        <label>性别</label>
        <cite >
          <input name="sex" type="radio" value="男" checked="checked" />男
          &nbsp;&nbsp;&nbsp;&nbsp;
          <input name="sex" type="radio" value="女" />女
        </cite>
      </li>
      <li>
        <label>所属公司名称</label>
        <input name="company" id="company" type="text" class="dfinput" />
        <i>必填，不能超过30个字符</i>
      </li>
      <li>
        <label>联系方式</label>
        <input name="telephone" id="telephone" type="text" class="dfinput" />
        <i>必填，请输入11位的电话号码</i>
      </li>
      <li>
        <label>联系地址</label>
        <input name="homeaddress" id="homeaddress" type="text" class="dfinput" />
        <i>必填，不能超过130个字符</i>
      </li>
      <li>
        <label>所属区域</label>
        <select class="dfselect" name="provinceId" id="provinceId" >
          <option value="">请选择</option>
          <option th:each="province:${session.provinceList}" th:text="${province.pName}"  th:value="${province.id}">北京</option>
        </select>
        省
        <select class="dfselect" name="address" id="cityId">
          <option value="">请选择</option>
        </select>
        市
        <i>必选</i>
      </li>
      <li>
        <label>描述</label>
        <textarea class="textinput" id="distract" name="distract"></textarea>
        <i>可选</i>
      </li>
      <li>
        <label>状态</label>
        <select class="dfselect" name="status">
          <option value="可用">可用</option>
          <option value="不可用">不可用</option>
        </select>
        <i>必选</i>
      </li>
      <li>
        <label>创建人</label>
        <input name="createid" type="hidden" th:value="${session.user.uid}"/>
        <input name="uname" type="text" th:value="${session.user.uname}" readonly="readonly" class="roinput" />
        <i>不能编辑</i>
      </li>
      <li>
        <label>创建时间</label>
<!--        <input name="createtime" id="createtime" type="text" value="2017-11-18 15:36:10" readonly="readonly" class="roinput" />-->
        <!--这里是String类型与属性类型不一致不能匹配到类中，因此不用 name="createtime"-->
        <input name="nowDate" id="createtime" type="text"  readonly="readonly" class="roinput" />

        <i>不能编辑</i>
      </li>
      <li>
        <label>&nbsp;</label>
        <input name="" type="button" class="btn" value="确定" onclick="toSubmit()" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="" type="button" class="btn" value="返回" onclick="toBack()"/>
      </li>
    </ul>
  </form>
</div>
  <script type="text/javascript">

    function toSubmit(){
      var customname = $("#customname").val();
      var company = $("#company").val();
      var telephone = $("#telephone").val();
      var homeaddress = $("#homeaddress").val();
      var cityId = $("#cityId").val();

      if(customname == null || customname == ""){
        $("#customname").next().text("用户名不能为空，不能超过30个字符！！！");
      }
      if(company == null || company == ""){
        $("#company").next().text("公司名不能为空，不能超过30个字符！！！");
      }
      if(telephone == null || telephone == ""){
        $("#telephone").next().text("联系方式不能为空，请输入11位的电话号码！！！");
      }
      if(homeaddress == null || homeaddress == ""){
        $("#homeaddress").next().text("家庭地址不能为空，不能超过30个字符！！！");
      }
      if(cityId == null || cityId == ""){
        $("#cityId").next().text("请选择城市信息");
      }
      if(customname != null && customname !=""
              && company != null && company != ""
              && telephone != null && telephone != ""
              && homeaddress != null && homeaddress != ""
              && cityId != null && cityId != ""
      ){
        $("#customForm").submit();
      }

    }

    $("#customname").blur(function(){
      if($("#customname").val().length>30){
        $("#customname").val("");
        $(this).next().text("内容超过30个字符，请重新输入！！！");
      }else if($("#customname").val().length == 0) {
        $(this).next().text("用户名不能为空，不能超过30个字符！！！");
      }else {
        $(this).next().text("格式正确！！！");
      }
    })
    $("#company").blur(function(){
      if($("#company").val().length>30){
        $("#company").val("");
        $(this).next().text("内容超过30个字符，请重新输入！！！");
      }else if($("#company").val().length == 0) {
        $(this).next().text("公司名不能为空，不能超过30个字符！！！");
      }else {
        $(this).next().text("格式正确！！！");
      }
    })
    $("#telephone").blur(function(){
      var telephone = $("#telephone").val();
      if(telephone != null && telephone != ""){
        if(!isTel($("#telephone").val())){
          $("#telephone").val("");
          $(this).next().text("电话号码格式不正确，请输入正确的11位数电话号码");
        }else {
          $(this).next().text("格式正确！！！");
        }
      }else {
        $(this).next().text("联系方式不能为空，请输入11位数电话号码！！！");
      }
    })
    $("#homeaddress").blur(function(){
      if($("#homeaddress").val().length>130){
        $("#homeaddress").val("");
        $(this).next().text("内容超过130个字符，请重新输入！！！");
      }else if($("#company").val().length == 0) {
        $(this).next().text("家庭地址不能为空，不能超过30个字符！！！");
      }else {
        $(this).next().text("格式正确！！！");
      }
    })
    function isTel(str) {
      var dtelReg = /^1(([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
      return dtelReg.test(str);
    }




    function toBack(){
      window.location.href="/market/customerList";
    }
    $(function () {
      $("#provinceId").change(function () {
        var provinceId = $("#provinceId").val();
        if (provinceId != null && provinceId != "") {
          $.ajax({
            url: "/custom/queryCityListByAjax",
            data: {"provinceId": provinceId},
            dataType: "JSON",
            success: function (data) {
              /*清空城市数据*/
              $("#cityId").html("");
              var options = "<option value=''>请选择</option>";
              var arr = null;
              if (typeof data == 'string')
                arr = JSON.parse(data);
              else
                arr = data;
              $.each(arr, function (i, obj) {

                options += "<option value='"
                        + obj.id
                        + "'>"
                        + obj.cname
                        + "</option>";

              });
              $("#cityId").html(options);
            },
            error: function () {
              alert(222);
            }
          });
        } else {
          /*清空城市数据*/
          $("#cityId").html("");
          var options = "<option value=''>请选择</option>";
          $("#cityId").append(options);
        }

      });

        var nowTime = new Date();
        var year = nowTime.getFullYear();
        var month = nowTime.getMonth()+1;
        var day = nowTime.getDate();
        var hour = nowTime.getHours();
        var minutes = nowTime.getMinutes();
        var second = nowTime.getSeconds();
        if(month>0 && month<10){
          month = "0"+month;
        }
        if(day>0 && day<10){
          day = "0"+day;
        }
        if(hour>0 && hour<10){
          hour = "0"+hour;
        }
        if(minutes>0 && minutes<10){
          minutes = "0"+minutes;
        }
        if(second>0 && second<10){
          second = "0"+second;
        }
        var nowDate = year+"-"+month+"-"+day+" "+hour+":"+minutes+":"+second;

        $("#createtime").val(nowDate);
      })

  </script>
</body>
</html>
